<template>
  <div class="wrapper">
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">校区：</span>
        <el-select size="mini" v-model="params.xq_id" placeholder="请选择校区">
          <el-option v-for="item in xqList" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">楼宇：</span>
        <el-select
          v-model="params.ly_id"
          size="mini"
          class="large-select"
          collapse-tags
          clearable
          placeholder="请选择楼宇">
          <el-option
            v-for="item in buildingList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <el-button @click="getBuildingInfo" icon="el-icon-search" size="mini" >查询</el-button>
      </div>
    </div>
    <div class="column">
      <div class="column-row">
        <img :src="data.img" alt="">
<!--        <img src="../../../assets/campus/p3-3.png" alt="">-->
      </div>
    </div>
  </div>
</template>

<script>
import portal from '@/api/portal'

export default {
  name: 'BuildingInfo',
  data () {
    return {
      option: {
        type: 1
      },
      params: {
        ly_id: null,
        xq_id: null
      },
      buildingList: [],
      xqList: [
        {
          text: '中关村',
          value: 1
        },
        {
          text: '良乡',
          value: 2
        },
        {
          text: '西山',
          value: 3
        }],
      data: {}
    }
  },
  created () {
    this.getGhly()
  },
  methods: {
    async getBuildingInfo () {
      const params = {
        ly_id: this.params.ly_id,
        xq_id: this.params.xq_id
      }
      const res = await portal.getBuildingInfo(params)
      if (res.data) {
        this.data = res.data
      }
    },
    // 获取规划楼宇
    async getGhly () {
      const result = await portal.getGhly()
      if (result.data) {
        result.data.forEach(e => {
          e.value = e.id
          e.label = e.ly_name
          e.check = false
        })
        this.buildingList = result.data
      }
    },
    toPage () {
      this.$router.replace({ name: 'DetailInformation', query: { id: '41' } })
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  .column {
    height: calc(100% - 60px);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: calc(100% - 20px);
    .column-row {
      flex: 1;
      margin: 10px 0;
    }
  }
}

</style>
